<template>
     <div ref="pages">
      <span class="news-text">{{titleName}}</span>
      <a-divider style="margin-top:20px;margin-bottom:20px;" />
       <div class="search-div-select">
         <a-input-group compact>
          <a-select default-value="项目名称" style="width:130px;"  v-model="querySelect">
            <a-select-option value="1">
              项目名称
            </a-select-option>
          </a-select>
          <a-input v-model="queryinput"  allow-clear style="font-size:12px;width:180px;"/>
        </a-input-group>
          <!-- <a-input v-model="queryinput" placeholder="请输入项目名称/招标项目编号" allow-clear style="font-size:12px;"/> -->
          <a-button type="primary" class="report-search-btn" @click="onQuery">查询</a-button>
       </div>
      <div class="unit-table-div">
          <CustomTable
            :onRowClick="onDetail"
            ref="table"
            :showAlert="false"
            :showSelection="false"
            :columns="columns"
            :loading="load"
            @change="onTableChange"
            :dataSource="pageData"

          >
            <!-- :scroll="{ y: 400 }" -->
            <template slot="xh" slot-scope="text, record, index">
              {{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}
            </template>
          </CustomTable>
      </div>
    </div>
</template>

<script>
// import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import api from "@/api/index";
  export default {
    name: "publicinfo",
    props: {
      page: {
        type: String,
        default: '1'
      },
    },
     data(){
      return{
        clientHeight:'',
        screenHeight:'',
        titleName:"事故信息记录",
        load: false,
        querySelect:'1',
        queryinput: '',
        columns: [
          {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:80,
              scopedSlots: { customRender: "xh" }
            },
            {
              title: '单位名称',
              dataIndex: 'nameDwzw',
              key: 'nameDwzw',
              ellipsis: true,
            },
            {
              title: '项目名称',
              dataIndex: 'nameXm',
              key: 'nameXm',
              ellipsis: true,
            },
            {
              title: '质量事故发生时间',
              dataIndex: 'timeZlsgfs',
              key: 'timeZlsgfs',
              ellipsis: true,
            },
            {
              title: '质量事故类别',
              dataIndex: 'typeSlsg',
              key: 'typeSlsg',
              ellipsis: true,
            },
            {
              title: '质量事故处理结果',
              dataIndex: 'resultZlsgcl',
              key: 'resultZlsgcl',
              ellipsis: true,
            },
        ],
        pageData: [],
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
          isPass:true,
          mh: 1
        }
      }

    },
    mounted(){
      this.setFootStyle()
      if(this.$route.query){
        this.queryinput = this.$route.query.queryinput;
        this.onQuery()
      }
      if(localStorage.getItem('contentHeader')){
        this.queryinput = localStorage.getItem('contentHeader')
        this.onQuery()
      } else {
        this.refreshTable();
      }
    },
    created() {

    },
    methods: {
      onDetail(record){
          this.$router.push({
              name:'accidentDetail',
              query:{
                type:'detail',
                id:record.id,
                breadcrumbName:'项目信息'

             }
            });

        },
      async refreshTable() {
       this.load = true;
       await api.get_xmsgclgk_list(this.pageFilter) .then(res => {
          let pageNo = this.pageFilter.pageNo;
          let pageSize = this.pageFilter.pageSize;
          let records = res.rows;
          let total = res.total;
          this.pageData = {
            ...this.pageData,
            pageNo,
            records,
            pageSize,
            total
          };
          this.load = false;

        })
        .catch(err => {
          this.load = false;
        });

        this.setFootStyle()
      },
     onTableChange(pageFilter) {
        this.pageFilter = { ...this.pageFilter, ...pageFilter };
        this.refreshTable();


    },
      setFootStyle(){
       this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>30){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",30);
                    }
                  }else{
                    emv.$emit("setfootmargintop",30);
                  }

          });
      },
    onQuery() {
      if(this.querySelect=='1'){
        this.pageFilter.nameXm = this.queryinput;
      }
      this.pageFilter.pageNo = 1;
      if(this.$route.query){
        this.queryinput = this.$route.query.queryinput;
      }
      if(localStorage.getItem('contentHeader')){
        this.queryinput = localStorage.getItem('contentHeader')
      }
      this.refreshTable();

    },
    getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}`
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
   },
   beforeRouteEnter(to, from, next) {
      // 设置下一个路由的 meta
       next(vm=>{
            emv.$emit("setMenuKey",to.meta.mkey);
         })
    },
  };
</script>
<style lang="less">
.news-text{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}

.unit-table-div{
  margin-left: -10px;
  .ant-table-thead > tr > th {
    padding: 16px 16px;
    overflow-wrap: break-word;
    font-size: 16px;
  }
  .ant-table-tbody > tr > td {
      padding: 16px 16px;
      overflow-wrap: break-word;
      font-size: 14px;
  }

}
.search-div-select{
  // width:320px;
  display:flex;
  margin-bottom: 20px;
  .report-search-btn{
    // width: 80px;
    height: 40px;
    background: #337BD7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
  }
  .ant-btn-primary:hover, .ant-btn-primary:focus {
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
  }
  .ant-input-group {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: table;
    // width: 50%;
    width: 320px;
    border-collapse: separate;
    border-spacing: 0;
  }
  .ant-input-group.ant-input-group-compact > *:first-child, .ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 40px;
}

.ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 40px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #999999;
}

.ant-select-selection--single .ant-select-selection__rendered {
    margin-right: 24px;
    line-height: 40px;
}
}

</style>
